<template>
	<div class="app">
		<button @click="counter++">+1</button>
		<h2 class="title" v-why v-if="showTitle">当前计数 {{ counter }}</h2>
		<button @click="showTitle = !showTitle">显示/隐藏</button>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	const counter = ref(0)
	const showTitle = ref(true)

	const vWhy = {
		created() {
			console.log('created')
		},
		beforeMount() {
			console.log('beforeMount')
		},
		mounted() {
			console.log('mounted')
		},
		beforeUpdate() {
			console.log('beforeUpdate')
		},
		updated() {
			console.log('updated')
		},
		beforeUnmount() {
			console.log('beforeUnmount')
		},
		unmounted() {
			console.log('unmounted')
		},
	}
</script>

<style scoped></style>
